<template>
  <div
    id="app"
    :style="{ width: form.width + 'px', height: form.height + 'px' }"
  >
    <div
      class="layout-main-wrap positionab zindex-100"
      :style="{ width: form.width + 'px', height: form.height + 'px' }"
    >
      <!--main start-->
      <layout-main></layout-main>
      <!--main edn-->
    </div>
    <el-button
      type="primary"
      @click="dialogChangePageSize = true"
      v-if="false"
      style="position:absolute;z-index:3;margin-left:440px;margin-top:23px;"
      >设置分辨率</el-button
    >
    <el-dialog
      title="设置分辨率"
      :visible.sync="dialogChangePageSize"
      width="400px"
    >
      <el-form :model="form" label-width="60px">
        <el-form-item label="宽度">
          <el-input v-model="form.width" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="高度">
          <el-input v-model="form.height" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogChangePageSize = false">取 消</el-button>
        <el-button type="primary" @click="handlerSetPageSize(form)"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <wsyjnav class="wsyjnav-box"></wsyjnav>

    <tab-bar></tab-bar>

    <router-view :key="$route.fullPath"></router-view>
    <div class="bottomLogo"></div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import wsyjnav from "@/views/common/navModule/wsyjnav.vue";
import tabBar from "@/views/common/TabBar.vue";
import layoutMain from "@/views/classic/LayoutMain.vue";

@Component({
  name: "App",
  components: {
    wsyjnav,
    tabBar,
    layoutMain
  }
})
export default class App extends Vue {
  private newHeight = "";
  private newWidth = "";
  private form = {
    width: "1920",
    height: "1080"
  };
  private dialogChangePageSize = false;
  private handlerSetPageSize(data: any) {
    // 更新store中的布局宽高;
    this.$store.dispatch("layoutModule/layoutSize", data);
    this.dialogChangePageSize = false;
  }
}
</script>

<style lang="less">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif, 'Microsoft YaHei UI';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height: 100%;
  position: relative;
  min-width: 1920px;
  min-height: 1080px;
}
#nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
.wsyjnav-box {
  position: absolute;
  top: 0;
  z-index: 2;
  width: 100%;
}
.wsyjnav-box::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 227px;
  background: url("./assets/img/layout/header_bg.png") no-repeat 50% 0;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 0;
}
.bottomLogo {
  width: 100%;
  height: 82px;
  background: url("./assets/img/layout/bottomLogo.png") no-repeat;
  position: absolute;
  bottom: 1px;
  z-index: 1;
}
</style>
